<template>
  <div class="main-div">
    <div class="search-div">

      <el-form :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="检索名称:">
          <el-input class="text-input"
                    size="mini"
                    clearable
                    placeholder="请输入名称"
                    @keyup.enter.native="loadData"
                    prefix-icon="el-icon-search"
                    v-model="queryParam.name">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="loadData">查询</el-button>
          <el-button type="magicGreen" size="mini" @click="openCreteDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-div">
      <div>
        <el-table
          ref="multipleTable"
          border
          stripe
          :data="circuitList"
          tooltip-effect="dark"
          height="580"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="70">
          </el-table-column>

          <el-table-column
            prop="name"
            label="回路名称"
            width="240">
          </el-table-column>
          <el-table-column
            prop="note"
            label="备注">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleViewClick(scope.row)">查看</el-button>
              <el-button type="magicGreen" size="mini" @click="handleEditClick(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="handleDelClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="margin-top">
          <el-pagination
            background
            small
            layout="prev, pager, next"
            :total="pageInfo.total"
            :page-size="pageInfo.size"
            :current-page="pageInfo.current"
            @current-change="changePageLoad"
            @next-click="changePageLoad"
            @prev-click="changePageLoad"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-drawer
      title="回路信息"
      :visible.sync="drawerVisible"
      size="55%">
      <div class="drawer-content">
        <el-form label-position="left" label-width="90px" size="small" v-model="saveObject">
          <el-form-item label="回路名称:">
            <el-input v-model="saveObject.name"></el-input>
          </el-form-item>
          <el-form-item label="备注信息:">
            <el-input v-model="saveObject.note" type="textarea" :rowspan="3"></el-input>
          </el-form-item>
          <el-form-item label="" style="text-align: right">
            <el-button type="magicGreen" size="mini" @click="openAddNode()">新增端子</el-button>
          </el-form-item>
        </el-form>
        <div></div>
        <el-table
          ref="multipleTable"
          border
          stripe
          :data="saveObject.children"
          tooltip-effect="dark"
          height="600px"
          style="width: 100%">
          <el-table-column
            prop="orderNum"
            label="序号"
            width="70">
          </el-table-column>

          <el-table-column
            prop="name"
            label="端子名称"
            width="100">
          </el-table-column>

          <el-table-column
            prop="screenName"
            label="所属屏类"
            width="100">
          </el-table-column>

          <el-table-column
            prop="equipName"
            label="所属装置"
            width="100">
          </el-table-column>
          <el-table-column
            prop="leftNode"
            label="左链"
            width="100">
          </el-table-column>
          <el-table-column
            prop="rightNode"
            label="右链"
            width="100">
          </el-table-column>
          <el-table-column
            prop="note"
            label="备注">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="magicGreen" size="mini" @click="openEditNode(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteNode(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div

        class="draw-footer">
        <el-button
          type="danger"
          @click="saveCircuit"
        >保 存
        </el-button>
      </div>
    </el-drawer>

    <div class="hidden-div">
      <el-dialog
        :title="actionNode.saveFlag==='edit'?'修改端子':'新增端子'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="660px"
      >
        <div class="dialog-line"/>
        <div class="dialog-padding">
          <el-form
            label-position="left"
            label-width="90px"
            :model="actionNode"
            size="small">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="端子名称">
                  <el-input type="text" v-model="actionNode.name"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="端子类别">
                  <el-select v-model="actionNode.nodeType" clearable class="select-100">
                    <el-option v-for="(item,index) in nodeTypeArr"
                               :key="index" :label="item.name" :value="item.code"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="所属屏类">
                  <el-input type="text" v-model="actionNode.screenName"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属装置">
                  <el-input type="text" v-model="actionNode.equipName"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="左链端子">
                  <el-input type="text" v-model="actionNode.leftNode"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="右链端子">
                  <el-input type="text" v-model="actionNode.rightNode"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用1">
                  <el-input type="text" v-model="actionNode.extText1"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="扩展备用2">
                  <el-input type="text" v-model="actionNode.extText2"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用3">
                  <el-input type="text" v-model="actionNode.extText3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="扩展备用4">
                  <el-input type="text" v-model="actionNode.extText4"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="扩展备用5">
                  <el-input type="text" v-model="actionNode.extText5"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="端子备注">
                  <el-input type="textarea" v-model="actionNode.note" :rowspan="5"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="saveNode"
          >保 存</el-button>
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        </span>

      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {addCircuit, deleteCircuit, listCircuitPage, getCircuitInfo, updateCircuit} from '@/api/electricity/circuit'
  import {deleteNode, updateNode} from "@/api/electricity/node";
  import nodeTypeUtils from '@/utils/dict/node-type-dict';

  export default {
    name: 'CircuitList',
    data() {
      return {
        queryParam: {},
        dataTree: [],
        circuitList: [],
        pageInfo: {
          size: 10,
          current: 1,
          total: 0
        },
        drawerVisible: false,
        saveObject: {},
        actionNode: {},
        dialogVisible: false,
        viewObjVisible: false,
        nodeTypeArr: nodeTypeUtils.nodeTypeArr,
        getNodeObj:nodeTypeUtils.getObj
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData() {
        let params = {...this.queryParam};
        params.current = this.pageInfo.current;
        params.size = this.pageInfo.size;
        listCircuitPage(params).then(res => {
          console.log('res:', res)
          this.circuitList = res.records;
          this.pageInfo.total = res.total;
          this.$message.success("查询成功.")
        })
      },
      changePageLoad(val) {
        this.pageInfo.current = val;
        this.loadData();
      },
      openCreteDialog() {
        this.saveObject = {}
        this.drawerVisible = true
        this.saveFlag = 'add'
      },
      mouseEnter(data) {
        this.$set(data, 'del', true)
      },
      mouseLeave(data) {
        this.$set(data, 'del', false)
      },
      async handleViewClick(node) {
        // let params = {id: node.id};
        // this.saveObject = await getCircuitInfo(params);
        // this.viewObjVisible = true;
        this.$router.push({name:'CircuitView',query: {id: node.id}})
      },
      async handleEditClick(node) {
        this.saveFlag = 'edit';
        let params = {id: node.id};
        this.saveObject = await getCircuitInfo(params);
        this.drawerVisible = true;

      },
      async handleDelClick(node) {
        let that = this
        // 删除数据
        that.$confirm('确认删除此条数据?', '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定之后删除
          that.saveFlag = 'edit';
          let data = {id: node.id}
          deleteCircuit(data).then(res => {
            that.loadData();
          });
        }).catch(() => {
          console.log('取消删除..');
        });
      },
      async saveCircuit() {
        if (this.saveFlag === 'add') {
          await addCircuit(this.saveObject);
        } else if (this.saveFlag === 'edit') {
          await updateCircuit(this.saveObject)
        }
        this.drawerVisible = false
        this.loadData();
      },
      openAddNode() {
        this.actionNode = {}
        this.dialogVisible = true
        this.actionNode.saveFlag = 'add'
      },
      openEditNode(node) {
        this.actionNode = {...node}
        this.actionNode.saveFlag = 'edit'
        this.dialogVisible = true
      },
      deleteNode(node) {
        // 删除数据
        this.$confirm('确认删除此条数据?', '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定之后删除
          this.saveObject.children = this.saveObject.children.filter(item => {
            return item.name !== node.name
          });
          if (node.id) {
            deleteNode(node).then(res => {
              console.log("后台删除成功")
            });
          }
          this.$forceUpdate();
        }).catch(() => {
          console.log('取消删除..');
        });
      },
      saveNode() {
        let tmpNode = {...this.actionNode}
        if (!this.saveObject.children) {
          this.saveObject.children = []
        }
        if (this.saveObject.id) {
          tmpNode.circuitId = this.saveObject.id
        }
        if (this.actionNode.saveFlag === 'edit') {
          this.saveObject.children.indexOf(tmpNode);
          let tmpIndex = this.saveObject.children.findIndex(item => {
            return item.id === tmpNode.id
          });
          this.saveObject.children.splice(tmpIndex, 1, tmpNode);
          if (this.actionNode.id) {
            updateNode(this.actionNode).then(res => {
              console.log('保存节点成功.');
              if (this.viewObjVisible) {
                this.handleViewClick({id: this.saveObject.id});
              }
            });
          }
        } else {
          tmpNode.orderNum = this.saveObject.children.length + 1
          this.saveObject.children.push(tmpNode)
        }
        this.dialogVisible = false;
      },
      fixIndex(tmpItem) {
        let index = this.saveObject.children.findIndex((item) => {
          return item.id === tmpItem.id
        })
        return index + 1
      }
    }
  }
</script>

<style scoped>

  /deep/ .el-scrollbar__wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .main-div {
    padding: 20px 20px;
  }

  .toolbar-row {
    padding: 0;
    width: 100%;
  }

  .drawer-content {
    padding: 10px 20px;
  }

  .draw-footer {
    width: 100%;
    text-align: right;
    position: fixed;
    bottom: 10px;
    right: 0;
    padding: 10px;
  }

  .custom-tree-node {
    width: 100% !important;
  }

  .left-tree {
    width: 500px;
    height: 700px;
    padding: 10px;
    border: #1f2d3d 1px solid;
    border-radius: 10px;
  }

  .circuit-name {
    font-size: 18px;
    font-weight: bold;
  }

  .circuit-name > span {
    color: #1396f8;
    font-weight: normal;
  }

  .line-view {
    width: 960px;
    height: 180px;
    overflow-x: auto;
    padding: 0 0 10px 0;
    margin: 20px 0 0 0;
    display: flex;
    white-space: nowrap;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }

  .node-div {
    display: inline-block;
    /*height: 40px;*/
    width: 90px;
    /*line-height: 38px;*/
    border-radius: 10px;
    /*border: #0e3874 2px solid;*/
    padding: 0 12px 0 2px;
    text-align: left;
    margin: 10px 0 10px 0;
    position: relative;
  }
  .node-img{
    height: 40px;
    width: 80px;
    line-height: 40px;
  }
  .node-name{
    position: absolute;
    width: 80px;
    text-align: center;
    left: 0;
    top: 42px;
    font-size: 12px;
    line-height: 12px;
  }

  .node-link{
    height: 2px;
    border: 2px solid #2b2b2b;
    position: absolute;
    top: 19px;
    right: 0;
    width: 40px;
    margin: 0 -30px;
  }

  .equip-div .node-link{
    top: 18px !important;
  }
  .screen-div .node-link{
    top: 19px;
  }

  .inline-div {
    display: inline-block;
    margin: 0 4px;
  }

  .node-split-div {
    display: inline-block;
    margin: 0 0 0 5px;
  }

  .num-div {
    height: 20px;
    width: 20px;
    line-height: 20px;
    font-size: 14px;
    border-radius: 10px;
    vertical-align: middle;
    display: inline-block;
    background: #044c83;
    color: #f0f0f0;
    text-align: center;
  }

  .left-node-div {
    height: 40px;
    width: 90px;
    line-height: 38px;
    padding: 0 12px 0 2px;
  }

  .right-node-div {
    height: 38px;
    width: 90px;
    line-height: 36px;
    padding: 0 12px 0 2px;

  }

  .box-div {
    border-radius: 10px;
    border: #029d04 2px solid;
    padding: 0 12px 0 2px;
  }

  .box-div .num-div {
    background: #078008;
  }

  .row-div {
    display: flex;
    padding: 8px 0;
  }

  .screen-div {
    border-radius: 20px;
    border: #00b0f0 solid 2px;
    padding: 8px 5px;
    display: flex;
    position: relative;
  }

  .equip-div {
    border-radius: 20px;
    border: #ffc000 solid 2px;
    padding: 7px 5px;
    display: flex;
    position: relative;
  }

  .screen-name {
    position: absolute;
    bottom: 5px;
    left: 10px;
    color: #00b0f0;
    z-index: 1000;
    font-size: 14px;
    margin: 5px 0 0 0;
  }

  .equip-name {
    position: absolute;
    bottom: 5px;
    right: 10px;
    color: #ffc000;
    z-index: 1000;
    font-size: 14px;
  }
</style>
